<template>
	<view class="container">
		<!-- 配送信息 -->
		<view class="distribution">
			<view class="distribution_item">
				<view class="item_left">收货地址</view>
				<view class="item_right" @click="goAddress">
					<view class="cont" v-if="!selectedAddress.id">
						请选择收获地址
					</view>
					<view class="selected" v-else>
						<text>{{selectedAddress.name}} {{selectedAddress.phone}}</text>
						<text class="address">{{selectedAddress.area_name}} {{selectedAddress.desc}}</text>
					</view>
					<view class="iconfont">&#xe613;</view>
				</view>
			</view>
			<view class="distribution_item">
				<view class="item_left">送达日期</view>
				<view class="item_right" @click="showCalendar = true">
					<view class="cont">
						{{defaultDate.length ? defaultDate[0] : '请选择送达日期'}}
					</view>
					<view class="iconfont">&#xe613;</view>
				</view>
			</view>
			<u-calendar :show="showCalendar" title="请选择送达日期" color="#884e22" :showLunar="true"
				:closeOnClickOverlay="true" :defaultDate="defaultDate" @close="closeCalendar"
				@confirm="confirmCalendar"></u-calendar>
			<view class="distribution_item">
				<view class="item_left">配送时间</view>
				<view class="item_right" @click="showTime=true">
					<view class="cont">
						{{defaultTime}}
					</view>
					<view class="iconfont">&#xe613;</view>
				</view>
			</view>
			<u-action-sheet :actions="timeList" :show="showTime" :closeOnClickOverlay="true" :closeOnClickAction="true"
				@close="closeTime" @select="selectTime"></u-action-sheet>
			<view class="distribution_item">
				<view class="item_left">配送方式</view>
				<view class="item_right" @click="showWay=true">
					<view class="cont">
						{{defaultWay}}
					</view>
					<view class="iconfont">&#xe613;</view>
				</view>
			</view>
			<u-action-sheet :actions="wayList" :show="showWay" :closeOnClickOverlay="true" :closeOnClickAction="true"
				@close="closeWay" @select="selectWay"></u-action-sheet>
			<image src="/static/personalCenter/m_orderinfo_bd2.png" mode="widthFix" class="lineImg"></image>
		</view>
		<!-- 订购人信息 -->
		<view class="purchaser_info">
			<view class="purchaser_left">订购人信息</view>
			<view class="purchaser_right">
				<view class="cont">
					选填
				</view>
				<view class="iconfont">&#xe613;</view>
			</view>
		</view>
		<!-- 留言区 -->
		<view class="message_area">
			<view class="message_item">
				<text>贺卡留言</text>
				<textarea v-model="cardMsg" placeholder="请输入贺卡留言! (选填)" class="textarea" />
			</view>
			<view class="message_item" style="margin-top: 10px;">
				<text>买家备注</text>
				<textarea v-model="remarks" placeholder="请输入备注! (选填)" class="textarea" />
			</view>
		</view>
		<!-- 需要下单的商品区 -->
		<view class="order_goods">
			<view class="goods_item" v-for="(item,i) in goodsList" :key="i">
				<view class="goods_left">
					<image :src="item.s_good.s_goods_photos[1].path" class="goods_img"></image>
					<view class="goods_text">
						<text>{{item.s_good.name}}</text>
						<view class="goods_num">
							<u-number-box integer v-model="item.num" @change="changeNum"></u-number-box>
						</view>
					</view>
				</view>
				<view class="goods_right">￥{{item.s_good.sale_price}}</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="pay_way">
			<view class="title">支付方式</view>
			<view class="pay_item" @click="selectPayWay(0)">
				<view class="icon">
					<text class="iconfont" style="color: #00c800;font-size: 22px;margin-right: 5px;">&#xe62c;</text>
					<text>微信</text>
				</view>
				<text class="iconfont" v-if="payWay === 0" style="color: #884e22;font-size: 24px;">&#xe667;</text>
			</view>
			<view class="pay_item" @click="selectPayWay(1)">
				<view class="icon">
					<text class="iconfont" style="color: #009fe8;font-size: 22px;margin-right: 5px;">&#xe634;</text>
					<text>支付宝</text>
				</view>
				<text class="iconfont" v-if="payWay === 1" style="color: #884e22;font-size: 24px;">&#xe667;</text>
			</view>
		</view>
		<!-- 发票 -->
		<view class="bill">
			<view class="bill_left">发票</view>
			<view class="bill_right">
				<view class="cont">
					选填
				</view>
				<view class="iconfont">&#xe613;</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order_info">
			<view class="total_num">共{{totalNum}}件商品</view>
			<view class="bottom">
				<view class="item">运费：<text class="color">+￥{{haulage.toFixed(2)}}</text></view>
				<view class="item">优惠：<text class="color">-￥{{preferential.toFixed(2)}}</text></view>
			</view>
		</view>
		<!-- 提交订单 -->
		<view class="submit_order">
			<view class="total_price">实付款：￥{{realityPrice.toFixed(2)}}</view>
			<view class="submit_btn" @click="submitOrder">提交订单</view>
		</view>
		<u-loading-page loadingText="正在提交订单..." color="#884e22" loadingColor="#884e22" bgColor="rgba(255,255,255,0)"
			loading-mode="spinner" :loading="loading" fontSize="16"></u-loading-page>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapMutations,
	} from 'vuex'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				goodsList: [],
				// 收货地址
				selectedAddress: {},
				// 送达日期
				showCalendar: false,
				defaultDate: [],
				// 配送时间
				timeList: [{
					name: '不限时段'
				}, {
					name: '上午(8:00-12:00)'
				}, {
					name: '中午(12:00-14:00)'
				}, {
					name: '下午(14:00-19:00)'
				}],
				showTime: false,
				defaultTime: '不限时段',
				// 配送方式
				wayList: [{
					name: '市区免费配送',
					money: 0
				}, {
					name: '近郊运费+30.00',
					money: 30
				}, {
					name: '远郊运费+50.00',
					money: 50
				}],
				showWay: false,
				defaultWay: '市区免费配送',
				// 支付方式
				payWay: 0,
				// 贺卡留言
				cardMsg: '',
				// 卖家备注
				remarks: '',
				// 运费
				haulage: 0,
				// 优惠
				preferential: 0,
				loading: false
			}
		},
		computed: {
			...mapState('cart', ['shoppingCartList']),
			realityPrice() {
				let goodsPrice = 0;
				this.goodsList.forEach(ele => {
					goodsPrice += ele.num * ele.s_good.sale_price
				})
				return goodsPrice + this.haulage - this.preferential
			},
			totalNum() {
				let sum = 0;
				this.goodsList.forEach(ele => {
					sum += ele.num
				})
				return sum
			}
		},
		onLoad() {
			uni.$on('selected', (data) => {
				this.selectedAddress = data
			})
			this.getGoodsInfo()
		},
		methods: {
			...mapMutations('cart', ['setshoppingCart']),
			// 获取下单的商品信息
			getGoodsInfo() {
				this.goodsList = uni.getStorageSync('goodsList')
			},
			// 送达日期
			closeCalendar() {
				this.showCalendar = false
			},
			confirmCalendar(value) {
				this.closeCalendar()
				this.defaultDate = [value[0]]
			},
			// 配送时间
			closeTime() {
				this.showTime = false
			},
			selectTime(index) {
				this.closeTime()
				this.defaultTime = index.name
			},
			// 配送方式
			closeWay() {
				this.showWay = false
			},
			selectWay(index) {
				this.closeWay()
				this.defaultWay = index.name
				this.haulage = index.money
			},
			// 收货地址
			goAddress() {
				// selectAddress用来决定address页面渲染不同的内容，使用户能选择
				uni.navigateTo({
					url: `/address/address?selectAddress=true`
				})
			},
			// 选择支付方式
			selectPayWay(value) {
				this.payWay = value
			},
			addOrder() {
				this.loading = true
				let shoppingCartIds = [];
				let goods_info = [];
				this.goodsList.forEach(ele => {
					shoppingCartIds.push(ele.id)
					goods_info.push({
						id: ele.s_good.id,
						num: ele.num
					})
				})
				uni.$http.post('/api/order', {
					project_id: 319,
					addr_id: this.selectedAddress.id,
					shoppingCartIds,
					goods_info
				}).then(res => {
					if (res.statusCode === 200) {
						// 重新请求购物车数据
						uni.$http.get('/api/shoppingCart', {
							project_id: 319
						}).then(data => {
							this.setshoppingCart(data.data.result)
						})
						// 清理缓存
						uni.removeStorageSync('goodsList');
						// 跳转
						setTimeout(() => {
							this.loading = false
							uni.redirectTo({
								url: `/pay/pay?id=${res.data.result.id}&total=${this.realityPrice}`
							})
						}, 600)
					}
				})
			},
			// 提交订单
			submitOrder() {
				if (JSON.stringify(this.selectedAddress) === '{}') {
					this.$refs.uToast.show({
						type: 'error',
						message: '未选择收货地址',
						duration: 1000,
						position: "top",
					})
					return;
				}
				if (!this.defaultDate.length) {
					this.$refs.uToast.show({
						type: 'error',
						message: '未选择送达日期',
						duration: 1000,
						position: "top",
					})
					return;
				}
				this.addOrder()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #009fe8 支付宝 */
	/* #00c800 微信 */
	.container {
		padding: 10px 10px 60px;

		.distribution {
			padding: 10px 10px 0;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 6px;

			.distribution_item {
				padding: 15px 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 14px;
				border-bottom: 1px solid #f7f9faff;

				.item_left {
					font-size: 15px;
				}

				.item_right {
					display: flex;
					align-items: center;

					.cont {
						margin-right: 10px;
					}

					.selected {
						width: 150px;
						display: flex;
						flex-direction: column;
						font-size: 12px;
						margin-right: 10px;
					}
				}
			}

			.lineImg {
				width: 100%;
			}
		}

		.purchaser_info {
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			background-color: #fff;
			border-radius: 6px;
			margin-top: 10px;

			.purchaser_left {
				font-size: 15px;
			}

			.purchaser_right {
				display: flex;
				align-items: center;

				.cont {
					margin-right: 10px;
				}
			}
		}

		.message_area {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding: 10px;
			border-radius: 6px;
			margin-top: 10px;

			.message_item {
				display: flex;
				flex-direction: column;
				font-size: 15px;

				.textarea {
					width: auto;
					height: 50px;
					border: 1px solid #767676ff;
					padding: 5px;
					font-size: 14px;
					margin-top: 10px;
				}
			}
		}

		.order_goods {
			padding: 10px;
			border-radius: 6px;
			margin-top: 10px;
			background-color: #fff;
			font-size: 14px;

			.goods_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px 0;
				border-bottom: 1px solid #f1f1f1;

				.goods_left {
					display: flex;

					.goods_img {
						width: 65px;
						height: 65px;
						margin-right: 10px;
					}

					.goods_text {
						position: relative;

						.goods_num {
							transform: scale(0.6);
							position: absolute;
							bottom: -7px;
							left: -22px;
						}
					}
				}

				.goods_right {
					color: #884e22;
					font-weight: 600;
					font-size: 15px;
				}
			}
		}

		.pay_way {
			background-color: #fff;
			padding: 10px;
			border-radius: 6px;
			margin-top: 10px;

			.title {
				font-size: 15px;
			}

			.pay_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f1f1f1;
				padding: 5px 0;
				line-height: 35px;

				.icon {
					display: flex;
					align-items: center;
				}
			}
		}

		.bill {
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;
			background-color: #fff;
			border-radius: 6px;
			margin-top: 10px;

			.bill_left {
				font-size: 15px;
			}

			.bill_right {
				display: flex;
				align-items: center;

				.cont {
					margin-right: 10px;
				}
			}
		}

		.order_info {
			background-color: #fff;
			border-radius: 6px;
			margin-top: 10px;
			padding: 10px;

			.bottom {
				margin-top: 10px;
				display: flex;

				.item {
					flex-grow: 1;

					.color {
						color: #884e22;
						font-weight: 600;
						font-size: 15px;
					}
				}
			}
		}

		.submit_order {
			background-color: #fff;
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			text-align: center;
			line-height: 50px;

			.total_price {
				width: 60%;
				color: #884e22;
			}

			.submit_btn {
				width: 40%;
				background-color: #884e22;
				color: #fff;
			}
		}
	}
</style>